<!DOCTYPE html>
<html xmlns:v="urn:schemas-microsoft-com:vml">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="renderer" content="webkit">
    <title>流程图DEMO</title>
    <!--[if lt IE 9]>
    <?import namespace="v" implementation="#default#VML" ?>
    <script type="text/javascript" src="https://cdn.bootcss.com/json2/20160511/json2.min.js"></script>
    <![endif]-->
    <link rel="shortcut icon" href="../assets/img/favicon.png" type="image/x-icon"/>
    <link rel="stylesheet" type="text/css" href="../dist/GooFlow.min.css"/>
<style>
.myForm{display:block;margin:0px;padding:0px;line-height:1.5;border:#ccc 1px solid;font: 12px Arial, Helvetica, sans-serif;margin:5px 5px 0px 0px;border-radius:4px;}
.myForm .form_title{background:#428bca;padding:4px;color:#fff;border-radius:3px 3px 0px 0px;}
.myForm .form_content{padding:4px;background:#fff;}
.myForm .form_content table{border:0px}
.myForm .form_content table td{border:0px}
.myForm .form_content table .th{text-align:right;font-weight:bold}
.myForm .form_btn_div{text-align:center;border-top:#ccc 1px solid;background:#f5f5f5;padding:4px;border-radius:0px 0px 3px 3px;} 
#propertyForm{float:right;width:260px}
</style>
</head>
<body style="background:#EEEEEE">
<div id="demo" style="margin:5px;float:left"></div>
<form class="myForm" id="propertyForm">
<div class="form_title">属性设置</div>
<div class="form_content">
  <table>
    <tr><td class="th">Id：</td><td><input type="text" style="width:120px" id="ele_id" readonly/></td></tr>
    <tr><td class="th">Name：</td><td><input type="text" style="width:120px" id="ele_name" readonly/></td></tr>
    <tr><td class="th">Type：</td><td><input type="text" style="width:120px" id="ele_type" readonly/></td></tr>
    <tr><td class="th">Model：</td><td><input type="text" style="width:120px" id="ele_model" readonly/></td></tr>
    <tr><td class="th">Left-r：</td><td><input type="text" style="width:120px" id="ele_left" readonly/></td></tr>
    <tr><td class="th">Top-r：</td><td><input type="text" style="width:120px" id="ele_top" readonly/></td></tr>
    <tr><td class="th">Width：</td><td><input type="text" style="width:120px" id="ele_width" readonly/></td></tr>
    <tr><td class="th">Height：</td><td><input type="text" style="width:120px" id="ele_height" readonly/></td></tr>
    <tr><td class="th">From：</td><td><input type="text" style="width:120px" id="ele_from" readonly/></td></tr>
    <tr><td class="th">To：</td><td><input type="text" style="width:120px" id="ele_to" readonly/></td></tr>
    <tr><td class="th" style="color:red">Extra：</td><td><input type="text" style="width:120px" id="ele_extra"/></td></tr>
  </table>
</div>
<div class="form_btn_div">
  <input type="button" value="保存自定义的Extra属性" onclick="Save()"/>
</div>
</form>
<div style="clear:both">
    <textarea id="result" style="width:972px;height:200px"></textarea><br>
    <input id="submit" type="button" value='导出结果' onclick="Export()"/>
</div>
<script src="../assets/js/demo_ide.js"></script>
<script type="text/javascript">
    var property={
        auth:auth,
        width:972,
        height:600,
        toolBtns:["start round","end round","task round","node","chat","state","plug","join","fork","complex mix"],
        haveHead:true,
        headBtns:["new","open","save","undo","redo","reload"],//如果haveHead=true，则定义HEAD区的按钮
        haveTool:true,
        haveGroup:true,
        useOperStack:true
    };
    var remark={
        cursor:"选择指针",
        direct:"结点连线",
        start:"入口结点",
        "end":"结束结点",
        "task":"任务结点",
        node:"自动结点",
        chat:"决策结点",
        state:"状态结点",
        plug:"附加插件",
        fork:"分支结点",
        "join":"联合结点",
        "complex mix":"复合结点",
        group:"组织划分框编辑开关"
    };
    var demo;
    $(document).ready(function(){
        demo=$.createGooFlow($("#demo"),property);
        demo.setNodeRemarks(remark);
        demo.onItemDel=function(id,type){
            if(confirm("确定要删除该单元吗?")){
                this.blurItem();
                return true;
            }else{
                return false;
            }
        }
        demo.loadData(jsondata);
        demo.onItemFocus=function(id,model){
            var obj;
            $("#ele_model").val(model);
            $("#ele_id").val(id);
            if(model=="line"){
                obj=this.$lineData[id];
                $("#ele_type").val(obj.M);
                $("#ele_left").val("");
                $("#ele_top").val("");
                $("#ele_width").val("");
                $("#ele_height").val("");
                $("#ele_from").val(obj.from);
                $("#ele_to").val(obj.to);
                $("#ele_extra").val(obj.extra||"");
            }else if(model=="node"){
                obj=this.$nodeData[id];
                $("#ele_type").val(obj.type);
                $("#ele_left").val(obj.left);
                $("#ele_top").val(obj.top);
                $("#ele_width").val(obj.width);
                $("#ele_height").val(obj.height);
                $("#ele_from").val("");
                $("#ele_to").val("");
                $("#ele_extra").val(obj.extra||"");
            }
            $("#ele_name").val(obj.name);
            return true;
        };
        demo.onItemBlur=function(id,model){
            document.getElementById("propertyForm").reset();
            return true;
        };
    });
    var out;
    function Export(){
        document.getElementById("result").value=JSON.stringify(demo.exportData());
    }
    function Save(){
        demo.setItemExtra( demo.$focus, $("#ele_model").val(), {"extra":$("#ele_extra").val()} );
    }
</script>
</body>
</html>
